<template>
<div class="app-container">
    <div class="filter-container clearfix">
        <router-link to="/member/staffs/add">
            <el-button type="primary">+添加员工</el-button>
        </router-link>
    </div>
    <el-table class="table-compact" :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" stripe fit highlight-current-row>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="title" label="职位">
        </el-table-column>
        <el-table-column prop="experience" label="经验">
        </el-table-column>
        <el-table-column prop="intro" label="介绍">
        </el-table-column>
        <el-table-column prop="phone" label="电话">
        </el-table-column>
        <el-table-column label="操作">
            <template scope="scope">
                    <router-link :to="'/member/staffs/'+scope.row._id">
                        <el-button type="text" >编辑</el-button>
                    </router-link>
                    <el-button @click="deleteUser(scope.row._id)" type="text" >删除</el-button>
                </template>
        </el-table-column>
    </el-table>
</div>
</template>

<script>
import fetch from '@/utils/fetch';
import {
    parseTime
} from '@/utils';

export default {
    components: {},
    data() {
        return {
            list: null,
            listLoading: true,
            pageInfo: {
                pageIndex: 1,
                pageSize: 50,
                totalCount: 0
            }
        }
    },
    watch: {
        'pageInfo.pageIndex': 'fetchData',
        'pageInfo.pageSize': 'fetchData',
    },
    created() {
        this.fetchData();
    },
    computed: {

    },
    methods: {
        fetchData() {
            this.listLoading = true;
            fetch({
                url: '/staffs',
                method: 'get',
                params: {
                    q: {
                        query: {},
                        sort: {
                            _id: 1
                        },
                        page: {
                            index: this.pageInfo.pageIndex,
                            size: this.pageInfo.pageSize
                        }
                    }
                }
            }).then(res => {
                this.list = res.data.pageDatas;
                this.pageInfo.totalCount = res.data.pageInfo.totalCount;
                this.listLoading = false;
            })


        },
        deleteUser(id) {
            this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                type: 'warning'
            }).then(() => {
                fetch({
                    url: '/staff/' + id,
                    method: 'DELETE'
                }).then(res => {
                    if (res.data.ok === 1) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.$delete(this.list, this.list.indexOf(this.list.find(item => {
                            return item._id === id;
                        })))
                    }
                });
            })
        },


    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.checkbox-item {
    display: block;
    margin: 6px 20px 6px 10px;
}
.img {
    margin: 8px 0;
    width: 80px;
    height: 60px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    &[lazy=error],
    &[lazy=loading] {
        background-size: 50%;
    }
}
.time {
    word-break: break-all;
}
.search-input {
    width: 300px;
}
</style>
